<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>199000145 郑桂花</title>
		<link rel="stylesheet" type="text/css" href="css/tabdemo.css"/>
		<script src="js/jquery-3.6.0.js"></script>
				<script>
				$(function(){//入口函数：文档就绪函数（有了入口函数，js脚本不会阻断HTML的解析，而是先渲染页面再进行js的解析）
					function a(b){
						$($(".hd li").eq(b)).mouseenter(function(){
							$(this).stop().fadeTo(500,1).css({"color":"red","background":"#fff","border-bottom":"1px","solid":"#fff","color":"#c00"});
							$(this).stop().siblings("li").css({"color":"black","border-bottom":"0px"});
							$(this).stop().siblings("li").fadeTo(500,0.4);
							$(this).fadeTo(500,1);
							$($(".bd ul").eq(b)).stop().show();
							$($(".bd ul").eq(b)).stop().siblings("ul").hide();
							}); 
					}
					a(0);
					a(1);
					a(2);
					a(3);
					a(4);
					$(".tabox").mouseleave(function(){
						$(".hd li").fadeTo(500,1);
					})
							
				});
			</script>
	</head>
	<body>
		<div class="tabox">
		      <div class="hd">
		        <ul>
		          <li class="on">疯狂抢购</li>
		          <li class=" ">猜您喜欢</li>
		          <li class=" ">热卖商品</li>
		          <li class=" ">热评商品</li>
		          <li class=" ">新品上架</li></ul>
		      </div>
		      <div class="bd">
		        <ul class="lh">
		          <img src="img/p1.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p2.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p3.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p4.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p5.jpg" >
		        </ul>
		      </div>
		    </div>
	</body>
</html>
